<template>
  <div class="mod-poap__audit">
    <div class="audit_box">
      <div class="query">
        <el-form>
          <el-form-item>
            <el-input v-model="state.dataForm.name" placeholder="请输入项目名称" @keyup.enter="getData()" :input-style="{ width: '100%',height:'40px',minWidth:'300px'}">
              <template #append>
                <el-button type="default" @click="getData">{{ $t("query") }}</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="contentBox">
        <div class="voteBox">
          <!-- <div class="vote-box"> -->
          <div class="voteItem" v-for="(item, index) in state.dataList" :key="index">
            <div class="top">
              <!-- 议题名称-->
              <div class="top-header">
                <div class="title">{{ item.name }}</div>
              </div>
              <!--          <div class="info_box">-->
              <!--            <div class="info" v-html="item.info"></div>-->
              <!--          </div>-->
              <!--  项目内容-->
              <div class="img-box">
                <el-tooltip effect="light" :content="item.pageStatus === 0 ? '有论文' : '无论文'" placement="top">
                  <div class="img">
                    <img :src="item.pageStatus === 0 ? `src/assets/images/page_0.png` : `src/assets/images/page_1.png`" alt="" />
                  </div>
                </el-tooltip>
                <el-tooltip effect="light" :content="item.codeStatus === 0 ? '有源代码' : '无源代码'" placement="top">
                  <div class="img">
                    <img :src="item.codeStatus === 0 ? 'src/assets/images/code_0.png' : 'src/assets/images/code_1.png'" alt="" />
                  </div>
                </el-tooltip>
                <el-tooltip effect="light" :content="item.datasetStatus === 0 ? '有数据集' : '无数据集'" placement="top">
                  <div class="img">
                    <img :src="item.datasetStatus === 0 ? 'src/assets/images/dataset_0.png' : 'src/assets/images/dataset_1.png'" alt="" />
                  </div>
                </el-tooltip>
              </div>
            </div>
            <!--  项目-->
            <div class="state_box">
              <!--   浏览次数-->
              <div class="viewNumber">
                <div class="img"><img src="@/assets/images/view.png" /></div>
                <div class="num">{{ item.viewNumber }}</div>
              </div>
              <!--       下载次数  -->
              <div class="downNumber">
                <div class="img"><img src="@/assets/images/down.png" /></div>
                <div class="num">{{ item.viewNumber }}</div>
              </div>
              <!--          开源许可证-->
              <div class="license">
                <div class="img"><img src="@/assets/images/license.png" /></div>
                <div class="num">{{ item.licenseDTO.name }}</div>
              </div>
            </div>
            <div class="check">
              <el-button v-if="state.hasPermission('poap:poapproject:audit')" type="primary" link @click="checkProject(item.id, state.dataForm.auditorId)">查看内容</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_box">
        <!-- <el-pagination :current-page="state.poapPage" :page-sizes="[6]" :page-size="state.poapLimit" :total="state.poapTotal" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination> -->
        <el-pagination :current-page="state.poapPage"  :page-size="state.poapLimit" :total="state.poapTotal" layout="total, prev, pager, next, jumper" @current-change="pageCurrentChangeHandle"> </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <checkPro :projectId="state.currentId" :isAudit="true" ref="checkProjectRef" @refreshDataList="getData" @getDataListChild="getDataListChild"></checkPro>
      <Participant ref="ParticipantRef" @refreshDataList="getData" :projectId="state.currentId" :projectStatus="state.currentStatus"></Participant>
    </div>
  </div>
  <!-- </div> -->
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { useAppStore } from "@/store";
import { nextTick, onBeforeMount, onBeforeUpdate, onMounted, reactive, ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import checkPro from "./checkProject.vue";
import Participant from "@/views/poap/poapparticipantproject.vue";
import baseService from "@/service/baseService";

const store = useAppStore();
const view = reactive({
  getDataListURL: "/poap/poapproject/selectSubmitedProject",
  getDataListIsPage: true,
  exportURL: "/poap/poapproject/export",
  deleteURL: "/poap/poapproject",
  deleteIsBatch: true,
  poapOrder: "",
  poapOrderField: "",
  poapPage: 1,
  poapLimit: 6,
  poapTotal: 0,
  currentId: "", //当前项目id
  currentStatus: 0, //当前项目状态
  drawerPart: false, //合作者抽屉
  dataForm: {
    name: "",
    status: 1,
    codeStatus: "",
    pageStatus: "",
    datasetStatus: "",
    auditorId: ""
  },
  statusText: [
    { value: 0, label: "草案" },
    { value: 1, label: "已提交" },
    { value: 2, label: "重新修订" },
    { value: 3, label: "审核通过" }
  ]
});

const state = reactive({ ...useView(view), ...toRefs(view) });

// 分页, 每页条数
// const pageSizeChangeHandle = (val: number) => {
//   state.poapPage = 1;
//   state.poapLimit = val;
//   getData();
// };
// 分页, 当前页
const pageCurrentChangeHandle = (val: number) => {
  state.poapPage = val;
  getData();
};

const getLoginUser = () => {
  console.log(store.state);
  state.dataForm.auditorId = store.state.user.id;
};
const getData = () => {
  baseService
    .get("/poap/poapproject/selectSubmitedProject", {
      order: state.poapOrder,
      orderField: state.poapOrderField,
      page: state.getDataListIsPage ? state.poapPage : null,
      limit: state.getDataListIsPage ? state.poapLimit : null,
      ...state.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code != 0) return false;

      state.dataListLoading = false;
      state.dataList = state.getDataListIsPage ? res.data.list : res.data;
      state.poapTotal = state.getDataListIsPage ? res.data.total : 0;
      getText();
    });
};

const getText = () => {
  state.dataList = state.dataList!.map((item, index) => {
    return { ...item, statusText: "" };
  });
  for (let i = 0; i < state.dataList.length; i++) {
    if (state.dataList[i].status === 0) state.dataList[i].statusText = "草案";
    else if (state.dataList[i].status === 1) state.dataList[i].statusText = "已提交";
    else if (state.dataList[i].status === 2) state.dataList[i].statusText = "重新修订";
    else if (state.dataList[i].status === 3) state.dataList[i].statusText = "审核通过";
  }
};

const ParticipantRef = ref();
const checkParticipant = (id: string, status: number) => {
  state.drawerPart = true;
  state.currentId = "";
  state.currentId = id;
  state.currentStatus = 0;
  state.currentStatus = status;
  nextTick(() => {
    ParticipantRef.value.initPart();
    ParticipantRef.value.$forceUpdate();
  });
};

const checkProjectRef = ref();
const checkProject = (id: string, userId: string) => {
  checkProjectRef.value.init(userId, id);
};
const getDataListChild = () => {
  getData();
};

onBeforeMount(() => {
  getLoginUser();
  getData();
});
</script>
<style lang="less" scoped>
.mod-poap__audit {
  overflow: auto;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .audit_box {
    display: flex;
    width: 98%;
    flex-direction: column;
  }

  .contentBox {
    display: flex;
    flex-direction: column;
    margin-left: 38px;
    margin-top: 28px;
  }

  .query {
    margin-left: 5%;
    width: 50%;
  }

  .voteBox {
    width: 75vw;
    margin-top: 40px;
    min-height: 200px;
    // height: 55.2vh;
    display: flex;
    flex-wrap: wrap;
    margin: auto;

    .voteItem {
      margin-right: 3.3%;
      margin-bottom: 30px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 18px;
      width: 30%;
      height: 45%;
      // min-height: 185px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      background-image: url("@/assets/images/vote_item_bg0.png");
      background-size: 100% 100%;
      min-width: 300px;

      .top {
        height: 53%;
        margin-top: 2%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 40px;

        .top-header {
          width: 96%;
          display: flex;
          flex-direction: row;

          .title {
            width: 98%;
            height: 45%;
            font-size: 1.7em;
            color: #4d93c7;
            text-align: center;

            border-left: none;
          }
        }

        .img-box {
          margin-top: 3%;
          width: 96%;
          height: 52%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              height: 60%;
            }
          }
        }
      }

      .check {
        height: 15%;
        display: flex;
        justify-content: end;
        margin-right: 25px;
        min-height: 40px;
        :deep(.el-button){
          font-size: larger;
        }
      }

      .state_box {
        height: 25%;
        margin-top: 5%;
        border-top: 1px solid rgba(77, 147, 199, 0.78);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        min-height: 25px;

        .viewNumber {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 25px;
            display: flex;
            align-items: center;
            min-width: 15px;

            img {
              width: 100%;
            }
          }

          .num {
            text-align: center;
            line-height: 48px;
            min-width: 3px;
          }
        }

        .downNumber {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 25px;
            display: flex;
            align-items: center;
            min-width: 15px;

            img {
              width: 100%;
            }
          }

          .num {
            text-align: center;
            line-height: 48px;
            min-width: 3px;
          }
        }

        .license {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 25px;
            display: flex;
            align-items: center;
            min-width: 15px;

            img {
              width: 100%;
            }
          }

          .num {
            text-align: center;
            line-height: 48px;
            min-width: 3px;
          }
        }
      }
    }

    //   .voteItem:nth-child(3n) {
    //     margin-right: 0;
    //     /* 每行第三个元素的右边距为0 */
    //   }
  }

  .bottom_box {
    display: flex;
    justify-content: center;
    // margin-top: 30px;
  }
}
</style>
